<template>
	<div class="system-menu-container layout-pd">
		<el-card shadow="hover">
			<div class="system-menu-search mb15">
				<el-form :inline="true" :model="ruleForm">
					<el-form-item><el-input size="default" v-model="ruleForm.one" placeholder="序号" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item><el-input size="default" v-model="ruleForm.one" placeholder="边缘计算单元编号" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item><el-input size="default" v-model="ruleForm.one" placeholder="设备序列号" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item>
						<el-select v-model="ruleForm.three" placeholder="设备类型" style="width: 180px;">
							<el-option label="启用" :value="0"></el-option>
							<el-option label="停用" :value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-input size="default" v-model="ruleForm.two" placeholder="区域名称" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item><el-input size="default" v-model="ruleForm.two" placeholder="道路名" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item><el-input size="default" v-model="ruleForm.two" placeholder="路段/路口名称" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item><el-input size="default" v-model="ruleForm.two" placeholder="丢包率" style="max-width: 180px"> </el-input></el-form-item>
					<el-form-item>
						<div class="block">
							<el-date-picker
								v-model="value1"
								type="date"
								placeholder="时延"
							/>
						</div>
					</el-form-item>
					<el-form-item>
						<div class="block">
							<el-date-picker
								v-model="value1"
								type="date"
								placeholder="最近更新时间"
							/>
						</div>
					</el-form-item>
					<el-form-item><el-button size="default" type="primary" class="ml10">查询</el-button></el-form-item>
				</el-form>
			</div>
			<el-table :data="state.tableData.data" style="width: 100%">
				<el-table-column prop="date" label="Date" width="180" />
				<el-table-column prop="name" label="Name" width="180" />
				<el-table-column prop="address" label="Address" />
			</el-table>
		</el-card>
		<MenuDialog ref="menuDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";



// 定义变量内容
const stores = useRoutesList();
const { routesList } = storeToRefs(stores);
const menuDialogRef = ref();
const state = reactive({
	tableData: {
		data: [] as RouteRecordRaw[],
		loading: true,
	},
});

// dx定义

const ruleForm = ref({
	one:"",
	two:"",
	three:null,
	four:null,
})



// dx书写end
// 获取路由数据，真实请从接口获取
const getTableData = () => {
	state.tableData.loading = true;
	state.tableData.data = routesList.value;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};
// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped>
	.el-input{
		height: 40px;
	}
	.el-button{
		height: 40px;
	}
</style>
